<template>
  <div class="default-layout">
    <el-container>
      <el-header class="header">
        <div class="header-left">
          <el-icon class="menu-toggle" @click="toggleCollapse">
            <expand v-if="isCollapse" />
            <fold v-else />
          </el-icon>
          <h1 v-show="!isCollapse">梅花易数后台管理系统</h1>
        </div>
        <div class="header-right">
          <!-- 登出组件 -->
          <Logout class="logout-component" />
          
          <!-- 主题切换 -->
          <el-dropdown @command="handleThemeCommand" class="theme-dropdown">
            <span class="el-dropdown-link">
              <i class="el-icon-sunny" v-if="themeStore.themeMode === 'light'"></i>
              <i class="el-icon-moon" v-else></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="light">
                  <i class="el-icon-sunny"></i> 明亮主题
                </el-dropdown-item>
                <el-dropdown-item command="dark">
                  <i class="el-icon-moon"></i> 暗黑主题
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-color-picker
                    v-model="themeStore.themeColor"
                    @change="handleColorChange"
                    :predefine="[
                      '#409EFF',
                      '#67C23A',
                      '#E6A23C',
                      '#F56C6C',
                      '#909399'
                    ]"
                  />
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
          <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" class="logo-img" />
            <span v-show="!isCollapse" class="logo-text">梅花易数</span>
          </div>
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            @select="handleMenuSelect"
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <el-menu-item index="/dashboard">
              <el-icon><House /></el-icon>
              <template #title>仪表板</template>
            </el-menu-item>
            <el-sub-menu index="user">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/user/list">用户列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="role">
              <template #title>
                <el-icon><Lock /></el-icon>
                <span>角色权限</span>
              </template>
              <el-menu-item index="/role/list">角色列表</el-menu-item>
              <el-menu-item index="/role/permission">权限分配</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="order">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/order/list">订单列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="recharge">
              <template #title>
                <el-icon><Coin /></el-icon>
                <span>充值管理</span>
              </template>
              <el-menu-item index="/recharge/list">充值列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="member">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>会员管理</span>
              </template>
              <el-menu-item index="/member/list">会员列表</el-menu-item>
              <el-menu-item index="/member/level">会员等级</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="model">
              <template #title>
                <el-icon><DataAnalysis /></el-icon>
                <span>模型管理</span>
              </template>
              <el-menu-item index="/model/hexagram">卦象管理</el-menu-item>
              <el-menu-item index="/model/algorithm">算法管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="config">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统配置</span>
              </template>
              <el-menu-item index="/config/system">系统设置</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="stats">
              <template #title>
                <el-icon><PieChart /></el-icon>
                <span>统计分析</span>
              </template>
              <el-menu-item index="/stats/user">用户统计</el-menu-item>
              <el-menu-item index="/stats/business">业务统计</el-menu-item>
              <el-menu-item index="/stats/divination">占卜统计</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useThemeStore } from '@/stores'
import Logout from '@/components/auth/Logout.vue'
import {
  House, User, Lock, Document, Coin, UserFilled, 
  DataAnalysis, Setting, PieChart, Expand, Fold
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const themeStore = useThemeStore()
const activeMenu = ref(route.path)
const isCollapse = ref(false)

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 监听路由变化，更新激活菜单
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

// 处理菜单选择
const handleMenuSelect = (index) => {
  router.push(index)
}

// 处理主题切换
const handleThemeCommand = (command) => {
  if (command === 'light' || command === 'dark') {
    themeStore.setThemeMode(command)
  }
}

// 处理颜色变化
const handleColorChange = (color) => {
  themeStore.setThemeColor(color)
}
</script>

<style lang="scss" scoped>
.default-layout {
  height: 100vh;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-bg-color);
    color: white;
    
    .header-left {
      display: flex;
      align-items: center;
      
      .menu-toggle {
        font-size: 20px;
        cursor: pointer;
        margin-right: 15px;
      }
      
      h1 {
        margin: 0;
        font-size: 1.5rem;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .logout-component {
        margin-right: 10px;
      }
      
      .el-dropdown-link {
        cursor: pointer;
        color: white;
        display: flex;
        align-items: center;
      }
      
      .theme-dropdown {
        .el-dropdown-link {
          font-size: 18px;
        }
      }
    }
  }
  
  .sidebar {
    background-color: var(--sidebar-bg-color);
    transition: width 0.3s ease;
    overflow-x: hidden;
    
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      
      .logo-img {
        width: 32px;
        height: 32px;
      }
      
      .logo-text {
        margin-left: 12px;
        font-size: 18px;
        font-weight: bold;
        color: white;
        white-space: nowrap;
      }
    }
    
    .sidebar-menu {
      border-right: none;
      height: calc(100% - 60px);
      
      :deep(.el-menu-item),
      :deep(.el-sub-menu__title) {
        color: #bfcbd9;
        
        &:hover {
          background-color: #2c3e50 !important;
        }
      }
      
      :deep(.el-menu-item.is-active) {
        background-color: #2c3e50 !important;
      }
    }
  }
  
  .main-content {
    background-color: var(--bg-color);
    padding: 20px;
  }
}
</style>